<template>
	<view class="majorAnswer">
		<navbar></navbar>
		<view class="majorAnswer-content">
			<view class="majorAnswer-content-top">
				<tui-icon name="arrowleft" color="black" size="28" margin="20rpx" @click="leftHandler"></tui-icon>
				<tui-tabs :tabs="tabs"
					:currentTab="currentTab" 
					@change="change" 
					width="280"
					bold="true"
					selectedColor="black"
					sliderWidth="50"
					sliderBgColor="black"
					backgroundColor="#EDEDED"
					></tui-tabs>
			</view>
			<van-search
			  :value="value"
			  shape="round"
			  background="#EDEDED"
			  placeholder="搜索"
				@blur="serchHadnler"
			/>
		</view>
			<view class="majorAnswer-bottom" v-show="currentTab == 0">
				<view class="majorAnswer-vw" v-for="item in 4">
					<view class="majorAnswer-bottom-view">
						<view class="majorAnswer-bottom-view-content">
							<view class="majorAnswer-bottom-view-content-top">
								年满60周岁, 还可以构成劳动关系么?
								<text>待审核</text>
							</view>
							<view class="majorAnswer-bottom-view-content-center">
								年满60周岁能否构成劳动关系?
								<text>04-13 07:23</text>
							</view>
							<view class="majorAnswer-bottom-view-content-bottom">
								<view class="majorAnswer-bottom-view-content-bottomS">
									<view class="majorAnswer-bottom-view-content-bottom-eye">
										<image src="../../../static/眼睛@1x.png" mode=""></image>0
									</view>
									<view class="majorAnswer-bottom-view-content-bottom-eye">
										<image src="../../../static/点赞@1x.png" mode=""></image>0
									</view>
								</view>
								<van-button type="primary" size="mini" color="#036FAF" round @click="showToast">修改</van-button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="majorAnswer-bottom" v-show="currentTab == 1">
				待审核
			</view>
			<view class="majorAnswer-bottom" v-show="currentTab == 2">审核通过</view>
			<view class="majorAnswer-bottom" v-show="currentTab == 3">审核失败</view>
			<tui-toast ref="toast"></tui-toast>
	</view>
</template>

<script>
	import tuiTabs from "@/components/thorui/tui-tabs/tui-tabs.vue"
	import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
	import tuiToast from "@/components/thorui/tui-toast/tui-toast.vue"
	export default {
		components:{
				tuiTabs,
				tuiIcon,
				tuiToast
		},
		data() {
			return {
				currentTab: 0,
				value: '',
				tabs: [{
						name: "全部"
					}, {
						name: "待审核"
					}, {
						name: "审核通过"
					},{
						name: "审核失败"
					},
				],
			}
		},
		methods: {
			// 标签栏切换
			change(e) {
				this.currentTab = e.index
				console.log(this.currentTab );
			},
			// 搜索框
			serchHadnler (event) {
				console.log(event);
			},
			// 返回
			leftHandler () {
				uni.navigateBack(-1)
			},
			showToast: function(e) {
				let params = {
					title: "很抱歉，问答审核中无法修改。",
				}
				this.$refs.toast.show(params);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.majorAnswer {
		height: 100vh;
		background-color: #EDEDED;
	}
	.img {
		width: 40rpx; 
		height: 40rpx;
		margin-top: 24rpx;
		font-weight: bold;
	}
	
	.majorAnswer-content-top {
		display: flex;
		align-items: center;
		background-color: #EDEDED;
	}
	
	.majorAnswer-bottom {
		background-color: #EDEDED;
	}
	.majorAnswer-bottom-view {
		width: 92%;
		height: 200rpx;
		background-color: white;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.majorAnswer-vw {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 10rpx;
	}
	
	.majorAnswer-bottom-view-content {
		width: 94%;
		height: 95%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	
	.majorAnswer-bottom-view-content-top {
		font-size: 28rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.majorAnswer-bottom-view-content-top > text {
		color: red;
	}
	
	.majorAnswer-bottom-view-content-center {
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
	}
	.majorAnswer-bottom-view-content-center > text {
		color: #A6A6A6;
		font-size: 24rpx;
	}
	
	.majorAnswer-bottom-view-content-bottom {
		font-size: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.majorAnswer-bottom-view-content-bottomS {
		width: 200rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.majorAnswer-bottom-view-content-bottom-eye > image {
		width: 24rpx;
		height: 24rpx;
	}
	
	.majorAnswer-bottom-view-content-bottom-zan > image {
		width: 24rpx;
		height: 24rpx;
	}
</style>
